<template>
  <!-- 催收执行页-案件信息模块-案件信息 -->
  <section class="component case-info">
    <!-- 案件信息 -->
    <data-grid :totalSpan="12" :labelWidth="125" labelAlign="center" contentAlign="left" style="margin:10px;">
      <data-grid-item label="姓名" :span="3">{{caseInfo.personalInfoPersonalName}}</data-grid-item>
      <data-grid-item label="客户号" :span="3">{{caseInfo.personalNo}}</data-grid-item>
      <data-grid-item label="电话" :span="3">{{caseInfo.personalInfoMobileNo | encryptPhone}}</data-grid-item>
      <data-grid-item label="申请金额" :span="3">{{caseInfo.contractInfoApplyAmount}}</data-grid-item>
      <data-grid-item label="批准贷款金额" :span="3">{{caseInfo.contractInfoLoanAmount}}</data-grid-item>
      <!-- <data-grid-item label="合同编号" :span="3">{{caseInfo.contractNumber}}</data-grid-item> -->
      <data-grid-item label="放款日期" :span="3">{{caseInfo.contractInfoLoanDate | dateFormat}}</data-grid-item>
      <data-grid-item label="贷款期限" :span="3">{{caseInfo.contractInfoLoanTerm | dateFormat}}</data-grid-item>
      <data-grid-item label="账单周期" :span="3">{{caseInfo.contractInfoBillCycle}}</data-grid-item>
      <data-grid-item label="每期还款金额" :span="3">{{caseInfo.perPayAmount}}</data-grid-item>
      <data-grid-item label="每期还款日" :span="3">{{caseInfo.perDueDate}}</data-grid-item>
      <data-grid-item label="逾期金额" :span="3">{{caseInfo.overdueAmount}}</data-grid-item>
      <data-grid-item label="逾期罚息" :span="3">{{caseInfo.overdueFine}}</data-grid-item>
      <data-grid-item label="逾期阶段" :span="3">{{caseInfo.overduePeriod}}</data-grid-item>
      <data-grid-item label="逾期本金" :span="3">{{caseInfo.overdueCapital}}</data-grid-item>
      <data-grid-item label="逾期利息" :span="3">{{caseInfo.overdueInterest}}</data-grid-item>
      <data-grid-item label="逾期天数" :span="3">{{caseInfo.overdueDays}}</data-grid-item>
      <data-grid-item label="逾期已还金额" :span="3">{{caseInfo.hasPayAmount}}</data-grid-item>
      <data-grid-item label="逾期日期" :span="3">{{caseInfo.overdueDate | dateFormat}}</data-grid-item>
      <data-grid-item label="未结罚息" :span="3">{{caseInfo.unboundFine}}</data-grid-item>
      <data-grid-item label="未结利息" :span="3">{{caseInfo.unboundInterest}}</data-grid-item>
      <data-grid-item label="最近还款日" :span="3">{{caseInfo.latelyPayDate | dateFormat}}</data-grid-item>
      <data-grid-item label="最近还款金额" :span="3">{{caseInfo.latelyPayAmount}}</data-grid-item>
      <!-- <data-grid-item label="逾期管理费" :span="3">{{caseInfo.overdueManageFee}}</data-grid-item> -->
      <data-grid-item label="滞纳金" :span="3">{{caseInfo.overduePenalty}}</data-grid-item>
      <data-grid-item label="其他费用" :span="3">{{caseInfo.otherFee}}</data-grid-item>
      <data-grid-item label="已还款期数" :span="3">{{caseInfo.hasPayPeriods}}</data-grid-item>
      <data-grid-item label="还款方式" :span="3">{{caseInfo.contractInfoPayWay | encryptContractInfoPayWay}}</data-grid-item>
      <data-grid-item label="年利率" :span="3">{{caseInfo.contractInfoYearRate}}</data-grid-item>
      <data-grid-item label="罚息利率" :span="3">{{caseInfo.contractInfoPenaltyRate}}</data-grid-item>
      <data-grid-item label="提前还款违约金费率" :span="3">{{caseInfo.contractInfoDamageRate}}</data-grid-item>
      <data-grid-item label="提前结清金额" :span="3">{{caseInfo.advancedAmount}}</data-grid-item>
      <data-grid-item label="借据状态" :span="3">{{caseInfo.caseStatus | encryptCaseStatus}}</data-grid-item>
      <!-- <data-grid-item label="分期服务费费率" :span="3">{{caseInfo.contractInfoServiceRate}}</data-grid-item> -->
      <!-- <data-grid-item label="贷款类型" :span="3">{{caseInfo.contractInfoLoanType}}</data-grid-item> -->
      <data-grid-item label="进入催收日期" :span="3">{{caseInfo.followInTime | dateFormat}}</data-grid-item>
      <data-grid-item label="永久催收员" :span="3">{{caseInfo.caseInfoRecordCurrentCollectorRealName}}</data-grid-item>
      <data-grid-item label="是否强制入催" :span="3">{{caseInfo.forceCollection==="YES"?'是':'否'}}</data-grid-item>
      <data-grid-item label="案件评分" :span="3">{{caseInfo.caseModelScore != null ? caseInfo.caseModelScore.toFixed(2) : ''}}</data-grid-item>
    </data-grid>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import { DataImportExcelInfoService } from '~/services/dataimp-service/data-import-excel-info.service.ts';
import { DataGrid, DataGridItem } from '@zct1989/vue-component';
import DataBox from '~/components/common/data-box.vue';
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL } from "~/config/enum.config"

@Component({
  components: {
    DataBox,
    DataGrid,
    DataGridItem,
  },
})
export default class CaseInfo extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;
  private caseInfo: any = {};


  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;

  /**
   * caseChannel
   */
  @Prop({ type: String, required: true })
  private caseChannel: string;

  private activated(){
    this.refreshData()
  }

  /**
   * 是否导入
   */
  private get isImport() {
    return this.caseChannel === CASE_CHANNEL.import
  }

  private refreshData() {
    if (this.isImport) {
      this.dataImportExcelInfoService.getImportCaseInfo(this.caseId).subscribe(
        data => this.caseInfo = data
      )
    } else {
      this.caseOperatorPageService.queryCaseInfo(this.caseId).subscribe(
        (data) => {
          this.caseInfo = data
          data.overduePeriod>12?this.caseInfo.overduePeriod = 'M12+':this.caseInfo.overduePeriod = 'M'+data.overduePeriod
        }
      );
    }
  }
}
</script>

<style lang="less" scoped>
.component.case-info {
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 15px;
    margin-right: 5px;
    background-color: #28313e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    vertical-align: middle;
  }

  .circle-title {
    font-size: 14px;
    line-height: 13px;
    color: #28313e;
  }
}
</style>
